<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地图遮罩</title>
    <!--引用在线的JS-->
    <!-- <link href="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.js"></script> -->
    <!--引用离线的JS-->
    <link href="./css/leaflet.css" rel="stylesheet">
    <script src="./js/leaflet.js"></script>
    <script src="./data/config.js"></script>
    <script type="text/javascript" src="./js/jquery.min.3.2.1.js"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #000000;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%;"></div>

<script type="text/javascript">
    //地图基础基于Leaflet构建，基础开发手册见
    //https://leafletjs.com/reference-1.6.0.html

    //离线地图示例地址
    // var mapofflineurl_mage='http://47.108.160.242:6789/gisserver/rest/services/mapserver/gaode-image/{z}/{x}/{y}';
    // var mapofflineurl_road='http://47.108.160.242:6789/gisserver/rest/services/mapserver/gaode-road/{z}/{x}/{y}';
    // var mapofflineurl_label='http://47.108.160.242:6789/gisserver/rest/services/mapserver/gaode-label/{z}/{x}/{y}';
    var mapofflineurl_image= mapserverurl + '/' + off_amap_img + '/{z}/{x}/{y}';
    var mapofflineurl_road= mapserverurl + '/' + off_amap_vec + '/{z}/{x}/{y}';
    var mapofflineurl_label= mapserverurl + '/' + off_amap_img_label + '/{z}/{x}/{y}';


    var layer1 = L.tileLayer(mapofflineurl_image);
    var layer2 = L.tileLayer(mapofflineurl_road);
    var layer3 = L.tileLayer(mapofflineurl_label);

    var map = L.map('map', {
        crs: L.CRS.EPSG3857,
        center: [ 31.0251, 112.2586],
        maxZoom: 18,
        zoom: 7,
        zoomControl: false,
        layers: [layer2]
    });

    var satelliteMapWithLabel = L.layerGroup([layer1, layer3]);

    var baseMaps = {
        "卫星img": satelliteMapWithLabel,
        "矢量vec": layer2
    };

    var ctrl = L.control.layers(baseMaps).addTo(map);
    ctrl.setPosition("bottomright") ;
    readRegionGeoJson();

    //加载显示区域的边界
    function readRegionGeoJson() {
        var url = "./data/hubei.geojson";
        var jhLine;
        $.getJSON(url, function(json) {
            jhLine = L.geoJSON(json, {style: {color: "#6495ED",weight:8,fillColor:'',fillOpacity:0.00001}});
            jhLine.addTo(map);
            drawBoundary(json.features[0].geometry.coordinates);
        });
    }
    //绘制遮罩层的思路是根据百度地图的逻辑来的，leaflet也可通用
    //反选 添加外部边界
    function drawBoundary(blist) {
        /*画遮蔽层的相关方法
            *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
            *      这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点，作为第一层
        var pNW = { lat: 59.0, lng: 73.0 };
        var pNE = { lat: 59.0, lng: 136.0 };
        var pSE = { lat: 3.0, lng: 136.0 };
        var pSW = { lat: 3.0, lng: 73.0 };
        //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
        var pArray = [];
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);
        //循环添加各闭合区域
        for (var i = 0; i < blist.length; i++) {
            var points = [];
            $.each(blist[i],function(k,v){
                points.push({lat:v[1],lng:v[0]});
            });
            //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
            pArray = pArray.concat(points);
            pArray.push(pArray[0]);
        }
        //添加遮蔽层
        var plyall = L.polygon(pArray, { color:'transparent',fillColor:'#C0C0C0',fillOpacity:0.9 }); //建立多边形覆盖物
        plyall.addTo(map);
    }


</script>
</body>
</html>